<template>
  <div class="bg">
    <div class="container flex">
      <div class="row-content">
        <div class="content-label">
          <div class="border"></div>
          <span>艺术墙艺涂装</span>
        </div>
        <div class="content">
          <h3 class="content-title">懒精灵艺术墙艺+艺术二匠实现艺术墙艺完美闭环</h3>
          <span class="content-describe">好艺术来自好工匠, <br />懒精灵建材行业职业能力培训基地， <br />常年培养艺术涂料、艺术墙绘、艺术浮雕等工匠
            <br />稳就业政策新职业能力</span>

        </div>
        <el-button type="success" round @click="$router.push('/join')">报名咨询+</el-button>
        <!-- <el-button>报名咨询+</el-button> -->
      </div>
      <div class="content-img">
        <img class="img-people" src="../../../assets/images/signup/people.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang='less' scoped>
.flex {
  .row-content {
    color: #fff;
    flex: 1;
    .content-label {
      margin-top: 2rem;
      margin-bottom: 5rem;
      .border {
        width: 3.5rem;
        height: 0.15rem;
        background: #fff;
        margin-bottom: 1rem;
      }
      span {
        font-size: 1.2rem;
      }
    }
    .content {
      .content-title {
        font-size: 2.1rem;
        line-height: 3.1rem;
      }
      .content-describe {
        font-size: 1rem;
        line-height: 1.6rem;
      }
    }
    .el-button {
      margin-top: 1rem;
    }
  }
  .content-img {
    flex: 2;
    text-align: end;
  }
}
.el-button--success {
  background: #8db83c;
  border-color: #8db83c;
}
@media only screen and (max-width: 992px) {
  .flex {
    flex-direction: column;
    align-items: center;
    .row-content {
      text-align: center;
      .content-label {
        .border {
          margin: 0rem auto 0.5rem;
        }
      }
    }
  }
}
</style>